<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<style>
			.area {
				margin: 20px auto 0px auto;
			}
			.mui-input-group:first-child {
				margin-top: 20px;
				
			}
			.mui-input-group label {
				width: 22%;
			}
			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				width: 78%;
			}
			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 6px;
			}
			.mui-content {
			    min-height: 100vh;
			    background-color: #E7EFFE;
			    padding:0 20px;
			    background:url(images/logoBg.png); background-size:100% 100%;
			}
			.mui-content-padded {
				margin-top: 25px;
			}
			.mui-btn {
				padding: 10px;
			}
			.mui-input-row label~input, .mui-input-row label~select, .mui-input-row label~textarea{
				margin-top: 1px;
			}
			
			.mui-input-row{
				display: flex;
				align-items: center;
				justify-content: flex-start;
				padding-left: 20px;
			}
			input[type=text],input[type=password]{
				width: 80%;
			}
			.code{
				width: 65% !important;
			}
			.hbg{
				background-color: #7DB1FD;
			}
			.hbg a,.hbg h1{
				color: white;
			}
			.list_item{ background:transparent;}
			.items{ height:50px!important; position:relative;  color:#333;    display: flex;  align-items: center;
			      justify-content: flex-start;
				  border-bottom:1px solid #fff;
				  border-top:none;
				  margin:16px 10px 0;
				 /*background: #fff !important;*/
				 border-radius: 3px;
				 font-size: 15px;
			}
			.list_item:after,.list_item:before{ background:transparent;}
			.list_item:after,.list_item:before{ background:#fff!important;}
			#cfbut{ background:#7DB1FD; border:0; right:20px; position:absolute;}
			#sendMail{ background:#7DB1FD; border:0;  border-radius: 30px;}
			.mui-input-row .mui-input-clear~.mui-icon-clear{ top:20px;}
			.logo{ width:130px; height:120px; margin:15px auto;}
			.logo img{ width:100%; height:100%; display: block;}
			  input::-webkit-input-placeholder {
		       /* placeholder颜色  */
		        color: #444;
		     
		     }
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">找回密码</h1>
		</header>
		<div class="mui-content">
			<div class="logo"> <img src="./images/logo.png" alt="" /></div>
			<form class="mui-input-group list_item">
				
				<div class="mui-input-row items">
					<div class="mui-icon mui-icon-phone"></div>
					<input id='account' type="text" class="mui-input-clear mui-input" value="" placeholder="手机号">
				</div>             	
                <div class="mui-input-row items">
					<div class="mui-icon mui-icon-paperclip"></div>
					<input id='code' type="text" class="mui-input-clear mui-input code" placeholder="请输入验证码">
					<button type="button" class=" mui-btn-blue" id="cfbut">发送</button>
				</div>
				<div class="mui-input-row items">
					<div class="mui-icon mui-icon-locked"></div>
					<input id='password' type="password" class="mui-input-clear mui-input" value="" placeholder="请输入密码">
				</div>
				<div class="mui-input-row items">
					<div class="mui-icon mui-icon-locked"></div>
					<input id='password2' type="password" class="mui-input-clear mui-input" value="" placeholder="请确认密码">
				</div>
			</form>
			<div class="mui-content-padded">
				<button id='sendMail' class="mui-btn mui-btn-block mui-btn-primary">提交</button>
			</div>
		</div>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/app.js"></script>
		<script>
			(function($, doc) {
				$.init();
				var settings = app.getSettings();
					var sendMail = document.getElementById('sendMail');
					var accountBox = document.getElementById('account');
					var passwordBox = document.getElementById('password');
					var code = document.getElementById('code');
					var password2 = document.getElementById('password2');
					var cfbut = document.getElementById('cfbut');
					sendMail.addEventListener('tap', function(event) {
						var regInfo = {
							account: accountBox.value,
							password: passwordBox.value,
							code: code.value
						};
						if("" == regInfo.account || "" == regInfo.password){
							mui.toast('用户名或密码不能为空');
							return;
						}
						var passwordConfirm = password2.value;
						if (passwordConfirm != regInfo.password) {
							mui.toast('密码两次输入不一致');
							return;
						}
						let data = {
						url:"/api/Login/update_password",
						data:{
							mobile:regInfo.account,
							password:regInfo.password,
							code:regInfo.code
							},
						}
					ajax(data,function(res){
							console.log(res);
							if(res.code == -1){
								mui.toast(res.message);
							}
							if(res.code == 1){
								mui.toast("修改成功");
							}
						});	
					});
			let i = 0,flag = true;
			cfbut.addEventListener("tap",function(){
				if(flag){
					let data = {
						url:"/api/Msn/index",
						data:{
							mobile:accountBox.value
						},
					}
					ajax(data,function(res){
							if(res.code == -1){
								mui.toast(res.message);
							}
							if(res,code == 1){
								mui.toast('验证码已发送到您的手机，请稍等...');
								let time;
								flag = !flag;
								time = setInterval(function(){
									i++;
									$("#cfbut").html("重发"+ i);
									if(i > 59){
										i = 0;
										 clearInterval(time);
										 mui.toast("如果验证码未收到，请重发");
										 flag = !flag;
										 $("#cfbut").html("重发");
									}
								},1000);
							}
						});
					
				}
			})
				
				
				
				
				
			}(mui, document));
		</script>
	</body>

</html>